<%-- 
    Document   : cart
    Created on : Apr 21, 2013, 3:07:52 PM
    Author     : Vitaliy Mostipaka <imprtat@gmail.com>
--%>
<%@page import="com.charlie.sessions.Cart"%>

<%@include file="/header.jsp"%>

<script>
    function cart_handle_item(item) {
        $('.cart_empty').hide();
        var el = $(item);
        var itemId = el.attr('id');
        var name = el.attr('name');
        var amount = el.attr('amount');
        var cost = el.attr('cost');
        var tr = $('<tr></tr>').addClass("cart_item_line");
        tr.append($('<td><a href="${pageContext.request.contextPath}/item/' + itemId + '">' + name + '</td>'));
        tr.append($('<td><input type="number" itemid="' + itemId + '" value="' + amount + '" min="1" max="<%= Cart.getMaxCost() %>" class="amount_filed"></td>').addClass('item_amount'));
        tr.append($('<td>' + cost + '$</td>'));
        tr.append($('<td><input type="button" itemid="' + itemId + '" value="Remove"></td>').addClass('cart_remove'));
        tr.insertBefore('.cart_total');
    }
    function cart_handle_item_set(item) {
        var el = $(item);
        var itemId = el.attr('id');
        var amount = el.attr('amount');
        $('input[type=number][itemid=' + itemId + ']').val(amount);
    }
    $(function() {
        $('.cart_container').on('click', '.cart_remove', function(e) {
            var itemId = parseInt($(e.target).attr("itemId"));
            if (itemId > 0) {
                $('.cart_item_line').remove();
                cart_query('set', itemId, 0, function(data) {
                    if (data.nodeName == 'amount' && data.textContent == '0')
                        $('.cart_empty').show();
                }, cart_handle_item);
            }
        });
        $('.cart_container').on('change', '.item_amount', function(e) {
            var itemId = parseInt($(e.target).attr("itemId"));
            var amount = parseInt($(e.target).val());
            if (itemId > 0 && amount > 0)
                cart_query('set', itemId, amount, null, cart_handle_item_set);
        });
        $('.button_order').click(function() {
            $(location).attr('href', '${pageContext.request.contextPath}/order');
        });
        $('.cart_container').on('keypress', 'input[type=number]', handle_number_keys);
        cart_query('items', 0, 0, null, cart_handle_item);
    });
</script>

<div class="left_side">
    <jsp:include page="/blocks/conditionalLeftBar.jsp" />
</div>

<div class="right_side">
    <h2 class="content_title">View cart</h2>
    <div class="white_block">
        <table class="cart_table">
            <colgroup>
                <col style="width: 65%;">
                <col style="width: 10%;">
                <col style="width: 10%;">
                <col style="width: 15%;">
            </colgroup>
            <thead>
                <tr>
                    <th class="cart_header_border" class="ttl-Text">Guitar</th>
                    <th class="cart_header_border">Count</th>
                    <th class="cart_header_border">Price</th>
                    <th></th>
                </tr>
            </thead>
            <tbody class="cart_container">
                <tr class="cart_empty">
                    <td colspan="4">The cart is empty</td>
                </tr>
                <tr class="cart_total">
                    <td class="cart_footer_border">Total without shipping</td>
                    <td class="cart_footer_border"><span class="so_amount">0</span></td>
                    <td class="cart_footer_border"><span class="so_cost">0</span>$</td>
                    <td></td>
                </tr>
                <tr>
                    <td colspan="4">
                        <br>
                        <input type="button" class="button_order" value="Choose warehouse" style="float: right;">
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

<jsp:include page="/footer.jsp" />